import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
    Tabs,
    TabsProps,
    TabList,
    TabListProps,
    Tab,
    TabProps,
    TabPanel,
    TabPanelProps,
    resetIdCounter,
} from 'react-tabs';

resetIdCounter();

interface TestTabProps extends TabProps {}
interface TestTabListProps extends TabListProps {}
interface TestTabPanelProps extends TabPanelProps {}
interface TestTabsProps extends TabsProps {}

class TestApp extends React.Component {
    onSelect = (index: number, last: number, event: Event) => {
        console.log('selected tab: ' + index.toString());
        console.log('last tab: ' + last.toString());
        console.log('event: ' + event.type);
    }
    private readonly tabsRef = React.createRef<Tabs>();

    render() {
        return React.createElement(
            Tabs,
            {
                onSelect: this.onSelect,
                selectedIndex: 1,
                defaultFocus: true,
                name: 'Tabs',
                autoFocus: true,
                ref: this.tabsRef,
            },
            React.createElement(
                TabList,
                { className: 'test-class' },
                React.createElement(Tab, { disabled: true }, 'Tab1'),
                React.createElement(Tab, { selectedClassName: 'active' }, 'Tab2'),
                React.createElement(Tab, {}, 'Tab3'),
            ),
            React.createElement(TabPanel, {}, React.createElement('h2', {}, 'Content1')),
            React.createElement(TabPanel, {}, React.createElement('h2', {}, 'Content2')),
            React.createElement(TabPanel, {}, React.createElement('h2', {}, 'Content3')),
        );
    }
}

ReactDOM.render(React.createElement(TestApp, {}), document.getElementById('test-app'));
